<template>
  <div class="layout-bg">
    <div class="layout-card">
      <div class="main-content">
        <MenuSide :isOpen="isOpen" />
        <div class="right-box">
          <div class="header">
            <div class="header-left">
              <a-button type="text" @click="toggleCollapsed" class="icon-btn">
                <MenuUnfoldOutlined v-if="isOpen" />
                <MenuFoldOutlined v-else />
              </a-button>
             
            </div>
            <div class="header-right">
              <a-button type="primary" shape="round" @click="logOut">退出系统</a-button>
            </div>
          </div>
          <div class="content-view">
            <router-view />
          </div>
        </div>
      </div>
      <div class="footer">© 2025 RongXiaoTong</div>
    </div>
  </div>
</template>

<script  setup>
import { reactive,ref} from 'vue';
import { useRouter } from 'vue-router'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined
} from '@ant-design/icons-vue';
import MenuSide from '@/components/MenuSide.vue';

const isOpen = ref(false)
const router = useRouter()
const toggleCollapsed= ()=>{
  isOpen.value = !isOpen.value;
}

const logOut = ()=>{
   
   router.replace('/login')
}
</script>

<style lang='scss' scoped>
@import '@/styles/_variables.scss';

.layout-bg {
  min-height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #e0e7ff 0%, #f5f7fa 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.layout-card {
  width: 100vw;
  min-height: 100vh;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 8px 40px 0 rgba(22,119,255,0.10), 0 1.5px 8px 0 rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin:  0;
}

.main-content {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  background: transparent;
}

.right-box {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.header {
  height: 64px;
  background: #c9caae;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 12px rgba(22,119,255,0.08);
  padding: 0 32px;

  .header-left {
    display: flex;
    align-items: center;
    gap: 18px;
    .brand-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 1px;
      color: #fff;
      .logo-img {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        margin-right: 4px;
      }
    }
    .icon-btn {
      color: #fff;
      font-size: 20px;
      background: rgba(255,255,255,0.08);
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
      transition: background 0.2s;
      &:hover {
        background: rgba(255,255,255,0.18);
      }
    }
  }
  .header-right {
    .ant-btn-primary {
      background: #fff;
      color: $primary-color;
      font-weight: 600;
      border: none;
      box-shadow: 0 2px 8px rgba(22,119,255,0.08);
      &:hover {
        background: #e6f4ff;
        color: $primary-color;
      }
    }
  }
}

.content-view {
  flex: 1 1 auto;
  background: $content-bg;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(22,119,255,0.06);
  padding: 15px;
  min-height: 400px;
  margin-bottom: 12px;
  overflow: auto;

}

.footer {
  text-align: center;
  color: $footer-color;
  background: transparent;
  padding: 18px 0 10px 0;
  font-size: 15px;
  letter-spacing: 1px;
}

@media (max-width: 900px) {
  .layout-card {
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
  }
  .main-content {
    border-radius: 0;
  }
  .right-box {
    border-radius: 0;
  }
}
</style>